<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>工程施工实时监控系统</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">


    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <!--<link rel="stylesheet" href="${pageContext.request.contextPath}/${pageContext.request.contextPath}/${pageContext.request.contextPath}/plugins/timepicker/bootstrap-timepicker.min.css">-->

    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>


    <!--<script src="${pageContext.request.contextPath}/${pageContext.request.contextPath}/${pageContext.request.contextPath}/plugins/timepicker/bootstrap-timepicker.min.js"></script>-->

    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/morris/morris.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/datepicker/datepicker3.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.theme.default.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/select2/select2.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.skinNice.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-slider/slider.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/layui/css/layui.css" media="all">
    <style>
        .content {
            padding-bottom: 25px;
        }

        /*使layui数据表格的checkbox居中*/
        .layui-table-cell .layui-form-checkbox[lay-skin="primary"] {
            top: 50%;
            transform: translateY(-50%);
        }

        .layui-form-item {
            height: 40px;
        }

        .layui-form-label {
            width: 100px;
        }

        .mylabel {
            font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
            width: 50px;
        }



    </style>
</head>

<body class="hold-transition skin-purple sidebar-mini">

<div class="wrapper">
    <security:authentication property="principal.id" var="id"
    ></security:authentication>
    <!-- 页面头部 -->
    <jsp:include page="header.jsp"></jsp:include>
    <!-- 页面头部 /-->

    <!-- 导航侧栏 -->
    <jsp:include page="aside.jsp"></jsp:include>
    <!-- 导航侧栏 /-->

    <!-- 内容区域 -->
    <!-- @@master = admin-layout.html-->
    <!-- @@block = content -->

    <div class="content-wrapper">

        <!-- 内容头部 -->
        <section class="content-header">
            <h1>
                作业成效
                <%--<small>数据列表</small>--%>
            </h1>
            <ol class="breadcrumb">
                <li><a href="${pageContext.request.contextPath}/pages/main.jsp"><i class="fa fa-dashboard"></i> 首页</a>
                </li>
                <li class="active">作业成效</li>
            </ol>
        </section>
        <!-- 内容头部 /-->

        <!-- 正文区域 -->
        <section class="content">

            <!-- .box-body -->
            <div class="box box-primary" >
            </div>
            <div class="demoTable">
                <div class="layui-form layui-card-header layuiadmin-card-header-auto" id="resetForm">
                    <security:authorize access="hasAnyRole('ROLE_SUPER_ADMIN,ROLE_ADMIN')">
                        <div class="layui-inline">
                            <select name="projectId" id="projectId" lay-filter="projectId">
                                <option value="">请选择项目</option>
                            </select>
                        </div>
                        <div class="layui-inline" id="sectionSel">
                            <select name="sectionId" id="sectionId" lay-filter="sectionId">
                                <option value="">请选择标段</option>
                            </select>
                        </div>
                    </security:authorize>
                    <div class="layui-inline" style="width: 130px">
                        <select name="device_code" id="device_code">
                            <option value="">选择设备</option>
                            <%--         <option value="1">成功</option>
                                     <option value="0">失败</option>--%>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" class="layui-input" id="start" name="start"
                               placeholder="开始日期">
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" class="layui-input" id="end" name="end"
                               placeholder="结束日期">
                    </div>


                    <div class="layui-btn" data-type="reload">搜索</div>
                    <div class="layui-btn" id="reset">重置</div>

                    <%--</div>--%>
                </div>
            </div>
            <table class="layui-hide" id="operationTable" lay-filter="operationTable">

            </table>

            <script type="text/html" id="toolbarDemo">

                <%--<button class=" layui-icon-cols" lay-event="refresh">刷新</button>--%>
            </script>

     <%--       <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                &lt;%&ndash;<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>&ndash;%&gt;
            </script>--%>

            <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
        </section>
        <!-- 正文区域 /-->

    </div>
    <!-- @@close -->
    <!-- 内容区域 /-->


</div>

<script src="${pageContext.request.contextPath}/plugins/layui/layui.js" charset="utf-8"></script>

<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
    $.widget.bridge('uibutton', $.ui.button);
</script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/adminLTE/js/app.min.js"></script>

<script>
    //主体表格
    layui.use(['table', 'layer', 'form', 'element', 'laydate'], function () {
        var table = layui.table;
        var form = layui.form;
        var element = layui.element;
        var laydate = layui.laydate;
        var id = "${id}";
        table.render({
            elem: '#operationTable'
            , url: '/cement/operationAll.do'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: [{ //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-refresh'
            }],
            skin: 'nob',
            where: {
                userId: id
            }
            , method: 'post'
            // , totalRow: true 合计行
            , title: '作业成效'
            , totalRow: true
            , cols: [[
                {
                    field: 'num',
                    title: '桩机号(设备)',
                    width: '25%',
                    edit: 'text',
                    align: "center"

                }
                , {
                    field: 'date', title: '日期', width: '25%', edit: 'text', align: "center",
                    templet: "<div>{{layui.util.toDateString(d.date, 'yyyy-MM-dd')}}</div>"
                }
                , {field: 'count', title: '成桩数量', width: '25%', edit: 'text', align: "center"}
                , {
                    field: 'sum',
                    title: '施工总长(m)',
                    width: '25%',
                    edit: 'text',
                    align: "center"
                }

            ]],
            done: function (res, curr, count) {
                //这里设置表格的宽度为100%
                $("table").css("width", "100%");
                //设置合计列赋值
                this.elem.next().find('.layui-table-total td[data-field="count"] .layui-table-cell').html("<div>" + "桩机总数  " + "<b>" + res.totalPiles + "</b>" + "  根" + "<div>");
                this.elem.next().find('.layui-table-total td[data-field="sum"] .layui-table-cell').html("<div>" + "施工总长  " + "<b>" + res.totalPileLength + "</b>" + "  m" + "<div>");

                //***重点***：table渲染完成后渲染element进度条
                element.render();
            },
            page: true
            ,
            id: 'testReload'
        });
        //条件查询重载表格
        var $ = layui.$, active = {
            reload: function () {
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        // key: {

                        projectId: $("#projectId").val(),
                        sectionId: $("#sectionId").val(),
                        device_code: $("#device_code").val(),
                        start_date: $("#start").val(),
                        end_date: $("#end").val()
                        // }
                    }
                }, 'data');
            }
        };
        //日期时间选择器
        laydate.render({
            elem: '#start'
            , type: 'datetime'
        });
        laydate.render({
            elem: '#end'
            , type: 'datetime'
        });

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //头工具栏事件
        table.on('toolbar(operationTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    $(".layui-laypage-btn").click();
                    break;
            }
        });
        //重置
        $('#reset').on('click', function () {
            $(':input', '#resetForm')
                .not(":button", ":reset", "hidden", "submit")
                .val("")
                .removeAttr("checked")
                .removeAttr("selected");
            // $("#condition option:first").prop("selected", 'selected');

            form.render('select');

            //执行重载
            table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {
                    userId: id,
                    projectId: $("#projectId").val(),
                    sectionId: $("#sectionId").val(),
                    device_code: $("#device_code").val(),
                    start_date: $("#start").val(),
                    end_date: $("#end").val()
                }
            }, 'data');
        });
        /* //监听筛选条件框事件
         form.on('select(state)', function (obj) {
             var sectionId = $("#sectionId");
             var projectId = $("#projectId");
             var state = $('#state');
             table.reload('testReload', {
                 page: {
                     curr: 1 //重新从第 1 页开始
                 }
                 , where: {
                     userId: id,
                     projectId: projectId.val(),
                     sectionId: sectionId.val(),
                     state: state.val()
                 }
             }, 'data');
         })*/
        /*       //监听搜索条件select框
               form.on('select(condition)', function (obj) {
                   if (obj.value === "0") {
                       $("#inp").attr("placeholder", "请输入编号");
                   } else if (obj.value === "1") {
                       $("#inp").attr("placeholder", "请输入机器号");
                   }
               })*/

        //搜索框下拉框联动
        form.on('select(projectId)', function (obj) {
            $.ajax({
                type: "get",
                url: "/section/sectionGroupName.do",
                data: {
                    projectId: obj.value,
                    userId: id
                },
                success: function (Data) {
                    // console.log(Data)
                    var section = $("#sectionSel");
                    var html = "";
                    html += '<select name="sectionId" id="sectionId" lay-filter="sectionId">';
                    html += '<option value="" >请选择标段</option>';

                    for (var i = 0; i < Data.length; i++) {
                        // console.log(Data[1])
                        html += '<option value="' + Data[i].id + '">' + Data[i].sectionName + '</option>';
                    }
                    html += '</select>';
                    section.html(html);
                    form.render('select');
                }
            });
            //获取设备列表
            $.ajax({
                type: "get",
                url: "/deviceManage/deviceList.do",
                data: {
                    projectId: $("#projectId").val()
                },
                success: function (Data) {
                    var device_code = $("#device_code");
                    var html = "";
                    html += '<select name="device_code" id="device_code" lay-filter="device_code">';
                    html += '<option value="" >选择设备</option>';
                    for (var i = 0; i < Data.length; i++) {
                        html += '<option value="' + Data[i].devNum + '">' + Data[i].devName + '</option>';
                    }
                    device_code.html(html);
                    form.render('select');
                }
            })
        });

        //搜索框下拉框联动
        form.on('select(sectionId)', function (obj) {
            //获取设备列表
            $.ajax({
                type: "get",
                url: "/deviceManage/deviceList.do",
                data: {
                    sectionId: $("#sectionId").val()
                },
                success: function (Data) {
                    var device_code = $("#device_code");
                    var html = "";
                    html += '<select name="device_code" id="device_code" lay-filter="device_code">';
                    html += '<option value="" >选择设备</option>';
                    var state = "";
                    for (var i = 0; i < Data.length; i++) {
                        html += '<option value="' + Data[i].devNum + '">' + Data[i].devName + '</option>';
                    }
                    device_code.html(html);
                    form.render('select');
                }
            })
        })

        /*        //监听行工具事件
                table.on('tool(deviceMonitoringTable)', function (obj) {
                    var data = obj.data;

                    if (obj.event === 'edit') {
                        layer.open({
                            type: 2,
                            // title: '详细信息',
                            maxmin: true,
                            skin: 'layui-layer-lan',
                            shadeClose: true, //点击遮罩关闭层
                            area: ['1400px', '800px'],
                            content: 'device-monitoring-details.jsp', //弹框显示的url,对应的页面
                            success: function (layero, index) {
                                var iframe = window['layui-layer-iframe' + index];
                                // 向子页面的全局函数child传参
                                iframe.child(data);
                            }
                        })

                    }
                });*/
    });

    /*  $(document).ready(function () {
        // 选择框
          $(".select2").select2();

            // WYSIHTML5编辑器
            $(".textarea").wysihtml5({
                locale: 'zh-CN'
            });
    });*/

    //页面初始化
    layui.use('form', function () {
        var form = layui.form;
        var id = "${id}";
        var arr = [];
        //获取标段列表
        $.ajax({
            type: "get",
            url: "/section/sectionGroupNameByUserId.do",
            data: {
                userId: id
            },
            success: function (Data) {
                // console.log(Data)
                var section = $("#sectionId");
                var html = "";

                for (var i = 0; i < Data.length; i++) {
                    html += '<option value="' + Data[i].id + '">' + Data[i].sectionName + '</option>';
                    arr.push(Data[i].project_id)
                }
                section.append(html);
                form.render('select');
                //获取项目列表
                $.ajax({
                    type: "get",
                    url: "/project/projectGroupName.do",
                    traditional: true,//这条必须加上，否则传不了数组
                    data: {
                        projectIds: arr
                    },
                    success: function (Data) {
                        // console.log(Data)
                        var project = $("#projectId");
                        var html = "";
                        for (var i = 0; i < Data.length; i++) {
                            html += '<option value="' + Data[i].id + '">' + Data[i].projectName + '</option>';
                        }
                        project.append(html);
                        form.render('select');
                    }
                });
            }
        });
        //获取设备列表
        $.ajax({
            type: "get",
            url: "/deviceManage/deviceList.do",
            data: {
                userId: id,
                projectId: $("#projectId").val(),
                sectionId: $("#sectionId").val()
            },
            success: function (Data) {
                var device_code = $("#device_code");
                var html = "";
                for (var i = 0; i < Data.length; i++) {
                    html += '<option value="' + Data[i].devNum + '">' + Data[i].devName + '</option>';
                }
                device_code.append(html);
                form.render('select');
            }
        })

    })

    /*    // 设置激活菜单
        function setSidebarActive(tagUri) {
            var liObj = $("#" + tagUri);
            if (liObj.length > 0) {
                liObj.parent().parent().addClass("active");
                liObj.addClass("active");
            }
        }*/

    /*    $(document).ready(function () {

            // 激活导航位置
            setSidebarActive("admin-datalist");

            // 列表按钮
            $("#dataList td input[type='checkbox']").iCheck({
                checkboxClass: 'icheckbox_square-blue',
                increaseArea: '20%'
            });
            // 全选操作
            $("#selall").click(function () {
                var clicks = $(this).is(':checked');
                if (!clicks) {
                    $("#dataList td input[type='checkbox']").iCheck("uncheck");
                } else {
                    $("#dataList td input[type='checkbox']").iCheck("check");
                }
                $(this).data("clicks", !clicks);
            });

        });*/

</script>
</body>

</html>
